<div class="row clearfix" [@routerTransition]>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="card main-content">
      <div class="header">
        <h2>{{ "MenuItems" | localize }}</h2>
        <ul class="header-dropdown m-r--5">
          <li>
            <button mat-icon-button [matMenuTriggerFor]="headerMenu" class="header-dropdown-mat-icon-button">
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #headerMenu="matMenu">
              <button mat-menu-item (click)="refresh()">
                <mat-icon>refresh</mat-icon>
                <span>{{ "Refresh" | localize }}</span>
              </button>
            </mat-menu>
          </li>
        </ul>
      </div>
      <div class="body table-responsive">
        <!--query start-->
        <div class="row clearfix">
          <form>
            <div class="row">
              <div class="col-md-6">
                <mat-form-field>
                  <input matInput [placeholder]="l('Filter')" [(ngModel)]="keyword" name="keyword">
                </mat-form-field>
              </div>
              <div class="col-md-6">
                <mat-form-field>
                  <mat-select [placeholder]="l('IsActive')" [(ngModel)]="isActive" name="isActive">
                    <mat-option value="">{{ 'All' | localize }}</mat-option>
                    <mat-option value="true">{{ 'Yes' | localize }}</mat-option>
                    <mat-option value="false">{{ 'No' | localize }}</mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
              <div class="col-md-12 text-right p-r-25">
                <button mat-raised-button color="primary" (click)="getDataPage(1)">{{ 'Search' | localize }}</button>
              </div>
            </div>
          </form>
        </div>
        <!--query end-->
        <table class="table table-hover table-striped" [busy]="isTableLoading">
          <thead>
            <tr>
              <th>{{ "Name" | localize }}</th>
              <th>{{ "PermissionName" | localize }}</th>
              <th>{{ "Icon" | localize }}</th>
              <th>{{ "Route" | localize }}</th>
              <th>{{ "Actions" | localize }}</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="
              let menuItem of (menuItems
                | paginate
                  : {
                      id: 'server',
                      itemsPerPage: pageSize,
                      currentPage: pageNumber,
                      totalItems: totalItems
                    })
            ">
              <td>{{ menuItem.name }}</td>
              <td>{{ menuItem.permissionName }}</td>
              <td>{{ menuItem.icon }}</td>
              <td>{{ menuItem.route }}</td>
              <td>
                <button class="action-button" mat-icon-button [matMenuTriggerFor]="actionsMenu">
                  <mat-icon>menu</mat-icon>
                </button>
                <mat-menu #actionsMenu="matMenu">
                  <button mat-menu-item (click)="editMenuItem(menuItem)">
                    <mat-icon>edit</mat-icon>
                    <span>{{ "Edit" | localize }}</span>
                  </button>
                  <button mat-menu-item (click)="delete(menuItem)">
                    <mat-icon>delete</mat-icon>
                    <span>{{ "Delete" | localize }}</span>
                  </button>
                </mat-menu>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="abp-pagination-controls-wrapper" *ngIf="totalItems > pageSize">
          <abp-pagination-controls (pageChange)="getDataPage($event)" id="server">
          </abp-pagination-controls>
        </div>
        <button mat-mini-fab color="primary" class="pull-right" (click)="createMenuItem()">
          <mat-icon>add</mat-icon>
        </button>
      </div>
    </div>
  </div>
</div>
